<template>
  <Navigation></Navigation>
  <div class="boder">
    <el-card style="width: 900px" shadow="always">
      <div class="up">
      <div>
        <el-image
        :src="userInfo.img"
        style="width: 80px; height: 80px"
      ></el-image>
      </div>
      <div class="up-title">
      <span class="boder-name">{{ userInfo.username }}</span>
      <span class="border-info"><el-button type="primary" round @click="gotoInfo">个人信息</el-button></span>
      </div>
      </div>
      <el-button class="boder-button1" type="danger" plain @click="logout">退出登录</el-button>
    </el-card>
    <div class="pop">
      <el-button class="user" type="primary" @mouseenter="signcompetition">我报名的竞赛</el-button>
      <el-button class="user1" type="primary" @click="signactivity">我报名的活动</el-button>
    </div>
  </div>
  <div class="node" v-for="item in sign" :key="item.id">
      <el-card style="width: 900px" shadow="hover">
        <el-image :src="'http://123.249.101.250:3000/static/'+item.face" style="width: 150px; height: 110px"></el-image>
        <span>{{ item.name }}</span>
        <div class="isli">
          <li>主办方：{{ item.sponsor }}</li>
        <li>竞赛级别：</li>
        <li>报名时间：{{ item.signstartdate }}</li>
        <li>竞赛时间：{{ item.startdate }}</li>
        <li>竞赛状态：报名中</li>
        </div>
      </el-card>
    </div>
    <div>
  <Bottom></Bottom>
  </div>
</template>
<script setup>
import Navigation from "@/components/Navigation.vue";
import router from "@/router";
import axios from "axios";
import { onBeforeMount, onMounted, ref } from "vue";
const logout = () => {
  localStorage.removeItem('token')
  router.push({
    path:'/stuindex'
  }).then(()=>{
    window.location.reload()
  })
}

const id = localStorage.getItem('token')
console.log(id);

const userInfo = ref([])


const getUserInfo = () => {
  axios.get(`http://localhost:3000/TbUserinfoController/getUserinfoById/${id}`).then(res=>{
    console.log(res);
    userInfo.value = res.data.data
  })
}

const sign = ref([])

const signcompetition = () => {
  axios.get(`http://localhost:3000/TbCompetitionActivityController/getUserCompetitioninfo/${userInfo.value.sno}/001`).then(res=>{
    sign.value = res.data.data
  })
  
}

const signactivity = () =>{
  axios.get(`http://localhost:3000/TbCompetitionActivityController/getUserCompetitioninfo/${userInfo.value.sno}/002`).then(res =>{
    sign.value = res.data.data
  })
}

const gotoInfo = () =>{
  router.push({
    path:'/perinfo'
  }).window.localStorage.reload()
}

onMounted(()=>{
  getUserInfo()
  signcompetition()
})





</script>
<style  scoped>
.boder {
  caret-color: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin-top: -150px;
}
.boder-name {
  margin-left: 30px;
  line-height: 100px;
  /* position: absolute; */
  margin-top: -45px;
}

.boder-button1 {
  margin-left: 750px;
  border-radius: 30px;
}
.pop{
  margin-top: 40px;
  margin-bottom: 40px;
  display: flex;
  margin-left:-663px;
  background-color: #f5f7fa;
}
.user {
  border-radius: 30px;
}
.user1 {
  border-radius: 30px;
}

.node{
  caret-color: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* background-color: #f5f7fa; */
  position:relative;
  top: -250px;
  margin-top: 20px;
}

.node span{
  margin-left: 20px;
  line-height: 100px;
  position: absolute;
  margin-top: -45px;
}
.isli {
  margin-left: 170px;
  margin-top: -80px;
  position: absolute;
  font-size: 10px;
  color: #909399;
  list-style: none;
}
.boder-button3 {
  margin-left: 600px;
  border-radius: 30px;
  margin-top: 50px;
  position: absolute;
}

.up {
  display:flex;
  height: 70px;
}

.up-title {
  margin-top: -35px;
}

.border-info {
  padding-left: 590px;
}
</style>